<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>复选框单选确认</title>
</head>
<body>

<label><input type="checkbox" name="sport" value="足球"> 足球</label><br>
<label><input type="checkbox" name="sport" value="篮球"> 篮球</label><br>
<label><input type="checkbox" name="sport" value="乒乓球"> 乒乓球</label><br>

<button onclick="checkSelected()">查看当前选中</button>

<script>
  const checkboxes = document.querySelectorAll('input[name="sport"]');

  checkboxes.forEach(cb => {
    cb.addEventListener('mousedown', function (event) {
      // 使用 mousedown 而不是 click 是因为 click 会在 checked 状态改变之后触发
      event.preventDefault(); // 阻止默认勾选行为

      const current = event.target;
      const wasChecked = current.checked; // 记录原状态
      const confirmMsg = `确定选择「${current.value}」吗？`;

      if (confirm(confirmMsg)) {
        // 如果用户确认，则取消其他所有并选中当前
        checkboxes.forEach(other => other.checked = false);
        current.checked = true;
      } else {
        // 如果用户取消，就保持原样，不做任何修改
        current.checked = wasChecked;
      }
    });
  });

  function checkSelected() {
    const selected = document.querySelector('input[name="sport"]:checked');
    if (selected) {
      alert("当前选中的是：" + selected.value);
    } else {
      alert("当前没有选中任何项目");
    }
  }
</script>

</body>
</html>



</body>
</html>